import { View, Text, Swiper, SwiperItem, ScrollView, Image } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { OsSearch } from 'ossaui'
import './index.scss'
import { useRef, useState } from 'react'

const swiperData = ['red', 'yellow', 'blue', 'pink', 'orange']

export default function Index() {
  const page = useRef(1)
  const [list, setList] = useState([])
  const [refresherTriggered, setRefresherTriggered] = useState(false)
  useLoad(() => {
    // 请求
    fetchList();
  })

  const fetchList = () => {
    Taro.request({
      url: 'http://localhost:3000/list',
      data: {
        _limit: 8,
        _page: page.current
      }
    }).then(res => {
      setList(page.current > 1 ? list.concat(res.data) : res.data)
    })
  }

  const jumpSearch = () => {
    Taro.navigateTo({
      url: '/pages/search/search'
    })
  }

  const onScrollToLower = () => {
    page.current += 1;
    fetchList()
  }

  return (
    <View className='index'>
      <View>
        <View onClick={jumpSearch}>
          <OsSearch onChange={(e, value) => onChange(e, value)}></OsSearch>
        </View>
        <Swiper autoplay className='swiperWrap'>
          {
            swiperData.map(item => {
              return (
                <SwiperItem >
                  <View style={{ background: item, height: '100%' }}></View>
                </SwiperItem>
              )
            })
          }
        </Swiper>
      </View>
      <View className='scrollContent'>
        <ScrollView
          scrollY
          refresherEnabled
          refresherTriggered={refresherTriggered}
          style={{ height: '100%' }}
          className='scrollView'
          refresherDefaultStyle="none"
          refresherBackground={'#ff5000'}
          onScrollToLower={onScrollToLower}
          onRefresherPulling={(e) => {
            if (!refresherTriggered) {
              setRefresherTriggered(true)
            }

            console.log(e.detail.dy, '===')
          }}
          onRefresherRefresh={() => {
            setRefresherTriggered(false)
            console.log('onRefresherRefresh')
            page.current = 1;
            fetchList()
          }}
        >
          <View>
            {
              list.map(item => {
                return (
                  <View
                    className='item'
                    onClick={() => {
                      Taro.navigateTo({
                        url: '/pages/detail/detail?id=' + item.id
                      })
                    }}
                  >
                    <Image src={item.image} className='itemImage' />
                    <View className='itemDetail'>
                      <Text className='itemTitle'>{item.title}</Text>
                      <Text className='itemPrice'>¥ {item.price}</Text>
                    </View>
                  </View>
                )
              })
            }
          </View>
        </ScrollView>
      </View>

    </View>
  )
}
